theme: Improve button styling

- Move the more generic %button style before %bubble_button to reduce
  ugly overrides.
- Remove sizing factors from _drawing.scss to reduce ugly !importants.
- Make the %bubble_button style more consistent.
- Add missing focus styling to %notification_bubble.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/931

diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 30dd6e4759c6043fa9493f70c030a3f72ae8e08f..d014283681c2b73f82a5989143b6a502977bbefc 100644 (file)
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -139,14 +139,30 @@ stage {
   &:focus { border: 2px solid $selected_bg_color;}
 }
 
+// button styling
+%button {
+  border-radius: $base_border_radius;
+  border-style: solid;
+  border-width: 1px;
+  min-height: 22px;
+  padding: $base_padding * 0.5 $base_padding * 4;
+
+  @include button(normal);
+  &:focus { @include button(focus);}
+  &:hover { @include button(hover);}
+  &:insensitive { @include button(insensitive);}
+  &:active { @include button(active);}
+}
+
 // buttons in dialogs
 %bubble_button {
   @include button(normal);
   padding: $base_padding * 2;
   border-color: $bubble_borders_color;
   border-style: solid;
-  border-width: 0 !important;
-  border-right-width: 1px !important;
+  border-width: 1px;
+  border-left-width: 0;
+  border-bottom-width: 0;
   box-shadow:none !important;
 
   &:insensitive { @include button(insensitive);}
@@ -160,7 +176,7 @@ stage {
   }
 
   &:last-child {
-    border-right-width: 0 !important;
+    border-right-width: 0;
     border-radius: 0 0 $modal_radius - 2px 0;
   }
   
@@ -169,38 +185,26 @@ stage {
   }
 }
 
-// button styling
-%button {
-  border-radius: $base_border_radius;
-  border-width: 1px;
-  min-height: 22px;
-  padding: $base_padding * 0.5 $base_padding * 4;
-
-  @include button(normal);
-  &:focus { @include button(focus);}
-  &:hover { @include button(hover);}
-  &:insensitive { @include button(insensitive);}
-  &:active { @include button(active);}
-}
-
 
 // notification styling
 %notification_bubble {
+  border-width: 1px;
+  border-style: solid;
   border-radius:$base_border_radius + 2px;
   padding: 0;
   margin: $base_margin;
 
   @include button(normal);
 
-  &:focus,
+  &:focus {
+    @include button(focus);
+  }
+
   &:hover {
-    // margin-top: $base_margin - 1px;
-    // margin-bottom: $base_margin + 1px;
     @include button(hover);
   }
 
   &:active {
     @include button(active);
-    // margin: $base_margin;
   }
-}
\ No newline at end of file
+}

diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 0ce778a43a1287ce3929ec519c9e028fdf3b4430..63f9f6c832f4a07e3c8154b4593f682c56f5890a 100644 (file)
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -134,8 +134,6 @@
   @if $t==normal {
     color: $tc;
     background-color: lighten($c, 3%) !important;
-    border-width: 1px;
-    border-style: solid;
     border-color: draw_border_color($c);
     @include draw_shadows(0 1px 1px 0 $shadow_color);
     // box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
@@ -156,8 +154,6 @@
   @else if $t==hover {
     color: $tc;
     background-color: lighten($c, if($variant == 'light', 8%, 5%)) !important;
-    border-width: 1px;
-    border-style: solid;
     border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c));
     @include draw_shadows(0 1px 1px 0 $shadow_color);
     text-shadow: 0 1px $text_shadow_color;
@@ -168,8 +164,6 @@
   @else if $t==active {
     color: $tc;
     background-color: darken($c,3%) !important;
-    border-width: 1px;
-    border-style: solid;
     border-color: draw_border_color(if($variant == 'light', $c, darken($c,7%)));
     text-shadow: none;
     icon-shadow: none;
@@ -179,8 +173,6 @@
   // insensitive button
   @else if $t==insensitive {
     color: $insensitive_fg_color;
-    border-width: 1px;
-    border-style: solid;
     border-color: $insensitive_borders_color;
     background-color: $insensitive_bg_color !important;
     box-shadow: none;

diff --git a/data/theme/gnome-shell-sass/widgets/_hotplug.scss b/data/theme/gnome-shell-sass/widgets/_hotplug.scss
index 203c92021d096a7fcc7a66d230caa497d4a0d254..acd0265dc4d371d6c8888f7aad61a233ec5686bf 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_hotplug.scss
+++ b/data/theme/gnome-shell-sass/widgets/_hotplug.scss
@@ -2,12 +2,9 @@
 
 .hotplug-notification-item {
   @extend %bubble_button;
-  border: none; box-shadow: none;
-  padding: 2px 10px;
-  &:focus { padding: 1px 71px 1px 11px; }
 }
 
 .hotplug-notification-item-icon {
   icon-size: 24px;
-  padding: 2px 5px;
+  padding: 0 4px;
 }

diff --git a/data/theme/gnome-shell-sass/widgets/_keyboard.scss b/data/theme/gnome-shell-sass/widgets/_keyboard.scss
index 35305221acd1c17f88f40778929987c7ebc947d1..2f3678b03bd0250caeaf062d84c7261b41a17818 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_keyboard.scss
+++ b/data/theme/gnome-shell-sass/widgets/_keyboard.scss
@@ -40,7 +40,8 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
   @include fontsize($base_font_size + 5);
   min-height: $key_size;
   min-width: $key_size;
-
+  border-width: 1px;
+  border-style: solid;
   border-radius: $key_border_radius;
 
   &:grayed { //FIXMEy

diff --git a/data/theme/gnome-shell-sass/widgets/_notifications.scss b/data/theme/gnome-shell-sass/widgets/_notifications.scss
index 20f2272a196437f175bf09e7cd9130b975121e7d..cc0a0852a469f893c6f1b8e3a766d47141477061 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_notifications.scss
+++ b/data/theme/gnome-shell-sass/widgets/_notifications.scss
@@ -43,18 +43,11 @@ $notification_banner_width: 34em;
 
   .notification-actions {
     padding-top: 0;
-    color: $fg_color;
-    border-top: 1px solid $bubble_borders_color;
     spacing: 0;
   }
 
   .notification-button {
     @extend %bubble_button;
-    min-height: $notification_banner_height * 0.5;
-    padding: $base_padding !important;
-    border-top-width: 0 !important;
-    
-    &:focus { box-shadow: none; }
   }
 }